<template>
	<!-- 任务 -->
	<view class="">
		<view class="task-item" @click.stop="toTaskDetail">
			<view class="acea-row row-top row-between item-top">
				<view class="task-tit line2">{{ '悬赏'+( list.rewardAmount?parseInt(list.rewardAmount) +'元' : '') +  list.managementResponse.title  }}</view>
				<view class="task-tit-l">
					<view v-if="list.status == 1">已完成</view>
					<view class="task-top-btn" v-else>
						{{taskStatus[list.rewardStatus]|| list.rewardStatus == 0? taskStatus[list.rewardStatus]:'未领取'}}
					</view>
					<view>（已{{ list.num || 0 }}人领）</view>
				</view>
			</view>
			<view class="acea-row row-bottom row-between item-bottom">
				<view class="share-list">
					<view class="share-item">
						分享赚1: <text>现金{{ list.rewardAmount || 0 }}元</text>
						（{{ list.trusteeship == 0 ? '暂未' : '已' }}托管平台）
					</view>
					<view class="share-item">
						分享赚2: <text>价值{{ list.coin || 0 }}元(金币)</text>,剩余{{list.surplusGold || 0}}(金币)
					</view>
				</view>
				<view class="item-bottom-btn" @click="toTaskDetail">任务详情</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		toPage
	} from '@/filters/commFilter.js'
	export default {
		props: {
			list: {
				type: Object,
				default: () => {
					return {}
				}
			},
			canClose: {
				type: Boolean,
				default: () => {
					return false
				}
			}
		},
		data() {
			return {
				taskStatus: {
					0: "未领取",
					1: "任务进行中",
					2: "已完成"
				}
			}
		},
		mounted() {
			// console.log("taskItem",this.list)
		},
		methods: {
			toPage,
			toTaskDetail() {
				if (this.list.status == 1) {
					this.$util.Tips({
						title: "任务已完成"
					})
					return;
				}
				uni.navigateTo({
					url: '/pages/details/offeraRreward/offeraRreward?taskId=' + this.list.id + '&fbInfo=' + JSON
						.stringify(this.list)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.task-list {
		background: #ffffff;
		border-radius: 10rpx 10rpx 0 0;
		margin: 0 26rpx 26rpx;
		padding: 36rpx;
	}

	.task-more-btn {
		margin: 24rpx auto;
		width: 222rpx;
		height: 52rpx;
		opacity: 1;
		border-radius: 30rpx;
		border: 1px solid rgba(238, 33, 45, 1);
		font-size: 26rpx;
		font-weight: 400;
		line-height: 52rpx;
		color: rgba(238, 33, 45, 1);
		text-align: center;
	}

	.task-top-btn {
		width: 154rpx;
		height: 46rpx;
		line-height: 46rpx;
		text-align: center;
		border-radius: 30rpx;
		border: 1px solid rgba(238, 33, 45, 1);
		font-size: 28rpx;
		font-weight: 400;
		color: rgba(238, 33, 45, 1);
	}

	.task-item {
		padding: 35rpx 30rpx;
		// height: 218rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 2rpx 4rpx 8rpx 10rpx rgba(0, 0, 0, 0.03);
		margin-top: 28rpx;
		border-radius: 15rpx;
		.item-top {
			.task-tit {
				width: 65%;
			}

			.task-tit-l {
				// width: 30%;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(166, 166, 166, 1);
				text-align: center;

				.task-top-btn {
					width: 132rpx;
					height: 42rpx;
					margin: 0 auto 6rpx;
					line-height: 42rpx;
					text-align: center;
					border-radius: 50rpx;
					background: rgba(238, 33, 45, 1);
					border: 1px solid rgba(235, 36, 61, 1);
					color: #ffffff;
				}
			}
		}

		.item-bottom {
			.share-list {
				width: 75%;

				.share-item {
					/** 文本1 */
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(166, 166, 166, 1);
					margin-top: 12rpx;

					text {
						/** 文本2 */
						font-size: 24rpx;
						font-weight: 400;
						color: rgba(212, 48, 48, 1);
					}
				}
			}

			.item-bottom-btn {
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(238, 33, 45, 1);
				padding-right: 16rpx;
				position: relative;

				&::after {
					content: '';
					display: block;
					position: absolute;
					top: 50%;
					right: 0;
					margin-top: -5rpx;
					width: 10rpx;
					height: 10rpx;
					border-top: 1px solid rgba(238, 33, 45, 1);
					border-right: 1px solid rgba(238, 33, 45, 1);
					transform: rotate(45deg);
				}
			}
		}
	}
</style>